<template>
  <k-list :is-empty="!list.length" :loading="loading">
    <view
      class="flex h-[160rpx] mb-4 text-[22rpx] text-[#9A9A9A]"
      v-for="(item, index) in list"
      :key="index"
      @click="handleSelect(index)"
    >
      <view class="denomination rounded-l-[16rpx]">
        <view class="text-base">
          <text class="text-[66rpx] font-bold relative text-center">
            <text class="absolute left-[-14rpx] w-full">
              <text class="text-sm">￥</text>
              <text>{{ parseFloat(item.money) }}</text>
            </text>
            <text class="opacity-0">{{ max }}</text>
          </text>
        </view>
        <view class="">{{ item[conditionKey] }}</view>
      </view>

      <view
        class="flex flex-1 items-center just border-l-0 border border-solid border-[#E8E8E8] pl-4"
      >
        <view class="flex-1">
          <view class="text-base text-sm">{{ item.name }}</view>
          <view class="mt-1">{{ item[timeKey] }}</view>
          <view class="mt-1">{{ item[sceneKey] }}</view>
        </view>

        <view class="mr-[20rpx]">
          <view v-if="selected">
            <radio
              class="transform scale-80"
              color="var(--wot-color-theme)"
              :checked="index == state.current"
            ></radio>
          </view>
          <template v-else>
            <view
              v-if="isGet && !item.is_receive"
              class="btn get"
              @click.stop="handleGet(item.id, index)"
            >
              领取
            </view>
            <view v-else-if="item.status == 0" class="btn go-used" @click.stop="emit('go')">
              去使用
            </view>
            <view v-else-if="item.status == 1" class="text-[#9A9A9A]">已使用</view>
            <view v-else-if="item.status == 2" class="text-[#9A9A9A]">已过期</view>
          </template>
        </view>
      </view>
    </view>
  </k-list>
</template>

<script setup>
import { fetchGetCoupon } from '@/service/course'
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  conditionKey: {
    type: String,
    default: 'condition',
  },
  sceneKey: {
    type: String,
    default: 'use_scene',
  },
  timeKey: {
    type: String,
    default: 'effective_time',
  },
  selected: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  isGet: {
    type: [Boolean, Number],
    default: false,
  },
})

const state = ref({
  current: -1,
})

const max = computed(() => {
  return props.list.reduce((max, current) => {
    return String(parseFloat(current.money) || '').length > String(max).length ? current.money : max
  }, '')
})

const emit = defineEmits(['select', 'go', 'get'])

function handleGet(id, i) {
  fetchGetCoupon({ id }).then((res) => {
    emit('get', res)
  })
}

function handleSelect(i) {
  if (!props.selected) return
  state.value.current = i
  emit('select', props.list[i])
}
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
  },
}
</script>
<style lang="scss" scoped>
.denomination {
  @apply flex justify-center items-center flex-col px-1;
  min-width: 180rpx;
  background: linear-gradient(180deg, #fff3d8 0%, #ffe7bb 100%);
}

.btn {
  @apply px-2.5 py-1 text-xs;
}

.go-used {
  @apply rounded-0.5 border border-solid border-primary text-base;
}

.get {
  @apply text-white bg-primary;
}
</style>
